<template>
  <div class="create-cost-dialog">
    <el-dialog
      :visible.sync="visible"
      :append-to-body="false"
      :show-close="!showMobilePage"
      :before-close="handleCancel"
      :class="{'global-mobile-dialog': showMobilePage}"
      class="dialog-size-auto small-common-dialog-size"
      width="450px"
      @open="openDialog">
      <div class="main">
        <Title :title="'更新结算数据'" font-size="16px" style="margin-bottom:20px;"/>
        <el-form
          ref="createDataForm"
          :rules="rules"
          :model="form"
          :label-position="showMobilePage?'top':'right'"
          label-width="90px"
          class="lineHeight32">
          <el-form-item label="结算订单下单日期" prop="createOrderDate" class="indentation-form-item">
            <el-date-picker
              v-model="form.createOrderDate"
              type="monthrange"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
              format="yyyy/MM"
              value-format="timestamp"
              class="width240" />
          </el-form-item>
        </el-form>
        <div class="btn-container">
          <el-button size="small" type="primary" @click="handleUpdate">重新生成数据</el-button>
          <el-button type="info" class="cancel-btn-style" size="small" @click="handleCancel">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { standardFormat } from '@/filters/date';
import { updateSettleData } from '@/api/todo';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { mapState } from 'vuex';

export default {
  components: { Title },
  filters: { standardFormat },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    preciseData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: {
      type: String | Number,
      default: ''
    },
    followUsers: {
      type: String | Number | Array,
      default: ''
    },
    time: {
      type: String | Array,
      default: ''
    }
  },
  data() {
    return {
      form: {
        createOrderDate: null
      },
      rules: {
        createOrderDate: [{ required: true, trigger: 'change', message: '请选择下单日期' }]
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog() {
      console.log(this.time);
      if (this.time && typeof this.time === 'string') {
        const arr = this.time.split('-');
        this.$set(this.form, 'createOrderDate', arr.map(item => {
          let month = '';
          if (item) {
            month = item.replace(/-/g, '/');// 兼容ios系统
            month = `${month}/01`;
          }
          item = new Date(month).getTime();
          return item;
        }));
      } else if (this.time && Array.isArray(this.time)) {
        this.$set(this.form, 'createOrderDate', this.time);
      }
    },
    handleUpdate() {
      // 校验必填
      this.$refs['createDataForm'].validate((valid) => {
        if (valid) {
          this.$emit('btnStatus', true);
          const params = JSON.parse(JSON.stringify(this.form));
          paramsRangeFormat([{ attr: 'createOrderDate', start: 'createOrderDateStart', end: 'createOrderDateEnd', type: 'time' }], params);
          params.followUsers = this.followUsers;
          updateSettleData(this.id, params).then(res => {
            this.$emit('updateData');
            this.$emit('btnStatus', false);
          }).catch(err => {
            console.log(err);
            this.$emit('btnStatus', false);
          });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.$refs['createDataForm'].resetFields();
      this.$emit('closeDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
}
.create-cost-dialog {
  &::v-deep {
    .el-form-item {
      .select-component-withouthttp {
        width: 100%;
      }
      .el-textarea__inner {
        resize: none;
      }
      &.indentation-form-item {
        label {
          line-height: 1.2 !important;
        }
      }
    }
  }
}
.btn-container {
  display: flex;
  justify-content: center;
}
</style>
